<script setup>
import {reactive, ref} from "vue";
import router from "@/router";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 重置数据
 */
const data = reactive({
    form: {}
})

/**
 * 重置校验
 * @type {UnwrapNestedRefs<{accountNo: [{trigger: string, message: string, required: boolean},{min: number, max: number, trigger: string[], message: string}], accountPassword: [{trigger: string, message: string, required: boolean},{min: number, max: number, trigger: string[], message: string}]}>}
 */
const rules = reactive({
    accountNo: [
        {required: true, message: '请输入账号', trigger: 'blur'},
        {min: 1, max: 20, message: '账号的长度必须在1-20个字符之间', trigger: ['blur', 'change']},
    ],
    accountPassword: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 6, max: 20, message: '密码的长度必须在6-20个字符之间', trigger: ['blur', 'change']},
    ]
})

/**
 * 重置表单验证
 * @type {Ref<any>}
 */
const formRef = ref()

/**
 * 账号列表
 */
let accountNoArray = []

/**
 * 获取账号列表
 */
const accountNoList = () => {
    request.get(`/api/account/account-no-list`).then(res => {
        accountNoArray = res.data
    })
}

/**
 * 用户重置
 */
const accountReset = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            accountNoList()
            for (let accountNoIndex = 0; accountNoIndex < accountNoArray.length; accountNoIndex++) {
                if (data.form.accountNo === accountNoArray[accountNoIndex]) {
                    if (data.form.accountPassword === data.form.accountPasswordAgain) {
                        request.put(`/api/account/account-reset`, data.form).then(res => {
                            if (res.code === "200") {
                                ElMessage.success('重置成功')
                                router.push(`/`)
                            } else {
                                ElMessage.error('重置失败')
                            }
                        })
                    } else {
                        ElMessage.error("两次输入的密码不一致")
                    }
                }
            }
        }
    })
}
</script>

<template>
    <div>
        <div class="login-container">
            <div style="width: 350px;" class="login-box">
                <div style="font-weight: bold; font-size: 24px; text-align: center; margin-bottom: 30px;">重置密码</div>
                <el-form :model="data.form" ref="formRef" :rules="rules">
                    <el-form-item porp="accountNo">
                        <el-input prefix-icon="User" v-model="data.form.accountNo"
                                  maxlength="20"
                                  placeholder="请输入账号"/>
                    </el-form-item>
                    <el-form-item porp="accountPassword">
                        <el-input prefix-icon="Lock" v-model="data.form.accountPassword"
                                  maxlength="20"
                                  show-password
                                  placeholder="请输入密码"/>
                    </el-form-item>
                    <el-form-item porp="accountPassword">
                        <el-input prefix-icon="Lock" v-model="data.form.accountPasswordAgain"
                                  maxlength="20"
                                  show-password
                                  placeholder="请再输入密码"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="accountReset" type="primary" style="width: 100%;">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <div style="margin-top: 30px; text-align: right;">
                    想起密码，
                    <el-link @click="router.push(`/`)" style="font-size: 16px;translate: 0 -2px">返回登录</el-link>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login-container {
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("https://s11.ax1x.com/2024/02/09/pF33jJg.png");
    background-size: cover;
}

.login-box {
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    border-radius: 10px;
}
</style>